<template>
    <view class="mainPage">
        <cu-custom :isBack="true"></cu-custom>
        <view class="page flex flex-direction justify-center align-center">
            <view class="w-100">
                <view class="progress bg-white radius-xl padding-sm margin-bottom">
                    <view class="item themeColor" :style="{ opacity: info.state>=1 ? 1 : 0.5 }">
                        <view class="image">
                            <image src="@/static/image/order/order_accept.png" mode=""></image>
                            <text class="text-sm">技师接单</text>
                        </view>
                    </view>
                    <view class="item themeColor" :style="{ opacity: info.state>=2 ? 1 : 0.5 }">
                        <view class="image">
                            <image src="@/static/image/order/order_go.png" mode=""></image>
                            <text class="text-sm">技师出发</text>
                        </view>
                    </view>
                    <view class="item themeColor" :style="{ opacity: info.state>=3 ? 1 : 0.5 }">
                        <view class="image">
                            <image src="@/static/image/order/order_arrive.png" mode=""></image>
                            <text class="text-sm">技师到达</text>
                        </view>
                    </view>
                    <view class="item themeColor" :style="{ opacity: info.state>=4 ? 1 : 0.5 }">
                        <view class="image">
                            <image src="@/static/image/order/order_start.png" mode=""></image>
                            <text class="text-sm">开始服务</text>
                        </view>
                    </view>
                    <view class="item themeColor" :style="{ opacity: info.state>=10 ? 1 : 0.5 }">
                        <view class="image">
                            <image src="@/static/image/order/order_end.png" mode=""></image>
                            <text class="text-sm">服务完成</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="w-100" v-if="info.qrcode && info.state === 3">
            <view class="qrcode-box text-center">
                <image :src="info.qrcode" class="qrcode" />
                <view class="text-center padding-bottom-sm text-grey">技师扫码核验</view>
            </view>
            </view>
            <view class="service-box" v-if="info.state === 4 && info.verification">
                <view class="padding radius-xl bg-white">
                    <view class="text-center themeColor">
                        <text class="cuIcon-roundcheckfill h1"></text>
                        <view class="text-bold text-sm margin-top-sm">核验成功</view>
                        <view class="text-bold text-sm margin-top-sm">{{ info.verification_time }}</view>
                    </view>
                    <view class="padding margin-tb-lg">
                        <view class="flex justify-between margin-tb-sm">
                            <view class="text-grey">预约时间：</view>
                            <view class="text-bold">{{ info.start_time }}</view>
                        </view>
                        <view class="flex justify-between margin-tb-sm">
                            <view class="text-grey">服务时长：</view>
                            <view class="text-bold themeColor">{{ info.duration }}分钟</view>
                        </view>
                        <view class="flex justify-between margin-tb-sm">
                            <view class="text-grey">计划通勤时长：</view>
                            <view class="text-bold">{{ info.commuting_duration }}分钟</view>
                        </view>
                        <view class="flex justify-between margin-tb-sm">
                            <view class="text-grey">计划抵达时间：</view>
                            <view class="text-bold">{{ info.plan_arrival_time }}</view>
                        </view>
                        <view class="flex justify-between margin-tb-sm" v-if="info.commuting_time">
                            <view class="text-grey">实际通勤时长：</view>
                            <view class="text-bold" :class="{ 'text-red': info.timeout, 'themeColor': !info.timeout }">
                                {{ getTimeText(info.commuting_time) }}</view>
                        </view>
                        <view class="flex justify-between margin-tb-sm">
                            <view class="text-grey">实际抵达时间：</view>
                            <view class="text-bold">{{ info.arrival_time }}</view>
                        </view>
                        <view class="flex justify-between margin-tb-sm" v-if="info.time > 0&&info.state === 4">
                            <view class="text-grey">剩余服务时长：</view>
                            <view class="text-bold themeColor">
                                <x-countdown class="time" :time="info.time" @end="getDetails" />
                            </view>
                        </view>
                    </view>
                    <view class="button text-center margin-top-lg" v-if="info.state === 4">
                        <button class="cu-btn china-btn-bg round margin-right-sm" @tap="getTechnicianAppointmentService">
                            <text class="padding-lr">加钟</text>
                        </button>
                        <button class="cu-btn bg-red round margin-left-sm" @tap="endServiceModal">
                            <text class="padding-lr">结束服务</text>
                        </button>
                    </view>
                </view>
            </view>
            <view class="service-box flex flex-direction justify-center align-center">
                <view class="project-list padding-sm radius-xl bg-white">
                    <view class="solid-bottom margin-bottom">
                        <view class="title">
                            <text class="cuIcon-titles themeColor"></text>预约项目
                        </view>
                        <view class="project padding-tb-sm">
                            <image :src="info.thumb" mode="" class="image"></image>
                            <view class="proBox padding-left-sm">
                                <view class="nameandtime">
                                    <view class="name text-bold text-black">{{ info.title }}</view>
                                    <view class="time text-gray text-sm">{{ info.duration }}分钟</view>
                                </view>
                                <view class="desc text-sm text-gray margin-bottom-sm">{{ info.tips }}</view>
                                <view class="cost">
                                    <view class="text-red text-bold">￥{{ info.price }}</view>
                                    <view class="num text-gray">x{{ info.num }}</view>
                                </view>
                            </view>
                        </view>
                    </view>
                    <view class="title margin-bottom-sm">
                        <text class="cuIcon-titles themeColor"></text>订单信息
                    </view>
                    <view class="crow margin-bottom-sm text-sm">
                        <view class="name">服务技师</view>
                        <view class="content">
                            <view class="cu-avatar sm round margin-left"
                                :style="{ backgroundImage: 'url(' + info.technician_headimg + ')' }"></view>
                            <text class="padding-left-xs text-bold">{{ info.technician_nickname }}</text>
                        </view>
                    </view>
                    <view class="crow margin-bottom-sm text-sm">
                        <view class="name">订单编号</view>
                        <view class="content">
                            <text class="text-bold">{{ info.trade }}</text>
                        </view>
                    </view>
                    <view class="crow margin-bottom-sm text-sm">
                        <view class="name">预约时间</view>
                        <view class="content">
                            <text class="text-bold">{{ info.start_time }}</text>
                        </view>
                    </view>
                    <view class="crow margin-bottom-sm text-sm">
                        <view class="name">订单备注</view>
                        <view class="content">
                            <text class="text-bold">{{ info.remark }}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <loading v-if="pageLoading" />
		<overtime :show="overtimeShow" :projects="projects" :remaining_minutes="remaining_minutes" :appointment_service_id="search.id" @update="getDetails" @close="overtimeShow=false;"/>
    </view>
</template>

<script>
import overtime from './modules/overtime'; // 延长服务
export default {
		components:{overtime},
    data() {
        return {
            pageLoading: false,
			overtimeShow:false,
            remaining_minutes:0,
            search: {
                id: '',
                action: 'user'
            },
            info: {},
            projects:[]
        };
    },
    onLoad(options) {
        this.search.id = options.id;
        this.getDetails();
    },
    methods: {
        getDetails() {
            this.pageLoading = true
            this.$utils.$api.AppointmentService.details(this.search).then(data => {
                this.info = data
                if (data.arrival_time) {
                    const arrival_time = new Date(data.arrival_time.replace(/-/g, '/'));
                    const plan_arrival_time = new Date(data.start_time.replace(/-/g, '/'));
                    plan_arrival_time.setMinutes(plan_arrival_time.getMinutes() + data.commuting_duration);
                    this.info.plan_arrival_time = `${this.getDayName(plan_arrival_time)} ${plan_arrival_time.getHours().toString().padStart(2, '0')}:${plan_arrival_time.getMinutes().toString().padStart(2, '0')}`;
                    this.info.timeout = false;
                    if (arrival_time > plan_arrival_time) {
                        this.info.timeout = true;
                    }
                }
                if (data.state === 4) {
                    const service_start_time = new Date(data.service_start_time.replace(/-/g, '/'));
                    service_start_time.setMinutes(service_start_time.getMinutes() + data.duration);
                    const now = new Date;
                    this.info.time = (service_start_time.getTime() - now.getTime()) / 1000;
                }
            }).catch((res) => {
            }).finally(() => {
                this.pageLoading = false
            })
        },
        endService() {
            this.pageLoading = true
            this.$utils.$api.AppointmentService.endService(this.search).then(res => {
                this.getDetails()
            }).catch((err) => {
                this.pageLoading = false;
                this.$utils.$message.error(err.msg);
            })
        },
        endServiceModal() {
            if (this.info.state === 4) {
                const service_start_time = new Date(this.info.service_start_time.replace(/-/g, '/'));
                service_start_time.setMinutes(service_start_time.getMinutes() + this.info.duration);
                const now = new Date;
                this.info.time = (service_start_time.getTime() - now.getTime()) / 1000;
                if (this.info.time > 0) {
                    uni.showModal({
                        title: '提示',
                        content: '当前服务时间还未结束，是否确认提前结束服务？',
                        success: (res) => {
                            if (res.confirm) {
                                this.endService();
                            }
                        }
                    })
                } else {
                    this.endService();
                }
            }
        },
        getTechnicianAppointmentService(){
            this.pageLoading = true
            this.$utils.$api.AppointmentService.getTechnicianAppointmentService(this.search).then(res => {
                this.overtimeShow=true;
                this.remaining_minutes=res.remaining_minutes;
                this.projects=res.projects
            }).catch((err) => {
                this.$utils.$message.error(err.msg);
            }).finally(() => {
                this.pageLoading = false
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.page {
    min-height: 90vh;
    padding: 30px 0;
}
.w-100{
    width: 100%;
    padding: 0 30px;
}
.progress {
    display: flex;
    justify-content: space-between;

    .item {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .image {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;

            image {
                width: 45upx;
                height: 45upx;
                margin-bottom: 10upx;
            }
        }

    }
}

.qrcode-box {
    background-color: #FFFFFF;
    border-radius: 10px;
    padding: 10px;
}

.qrcode {
    width: 200px;
    height: 200px;
}

.service-box {
    width: 100%;
    min-height: 50vh;
    padding: 0 30px;
    box-sizing: border-box;
}

.project-list {
    width: 100%;
    box-sizing: border-box;

    .project {
        display: flex;

        .image {
            width: 130upx;
            height: 130upx;
            border-radius: 20upx;
        }

        .proBox {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-around;

            .nameandtime,
            .cost {
                display: flex;
                justify-content: space-between;
            }
        }
    }
}

.h1 {
    font-size: 72rpx;
}
.crow {
    justify-content: space-between
}</style>
